import { Appbar, Menu } from 'react-native-paper';
import { getHeaderTitle } from '@react-navigation/elements';
import React from 'react';

export default function CustomNavigationBar({ navigation, route, options, back  }) {
    const title = getHeaderTitle(options, route.name);
    const [visible,setVisible] = React.useState(false);
    const openMenu = () => setVisible(true);
    const colseMenu = () => setVisible(false);

  return (
    <Appbar.Header>
      {back ? <Appbar.BackAction onPress={navigation.goBack} /> : null}
      <Appbar.Content title={title} />
      {!back && (
      <Menu
      visible={visible}
      onDismiss={colseMenu}
      anchor={
        <Appbar.Action  icon={'dots-vertical'} onPress={openMenu} />
      }
      >
        <Menu.Item onPress={()=>{console.log('option1')}} title="Option1" />
        <Menu.Item onPress={()=>{console.log('option2')}} title="Option2" />
        <Menu.Item onPress={()=>{console.log('option3')}} title="Option3" disabled/>
        <Menu.Item onPress={()=>{console.log('option4')}} title="Option4" />
        <Menu.Item onPress={()=>{console.log('option5');colseMenu()}} title="Option5" />
      </Menu>)}
    </Appbar.Header>
  );
}